"""
@author: Gaoyaoxia
@date: 2021-02-26 16:59:31
"""
<!-- 表单弹窗 -->
<template>
  <a-modal
    centered
    :width="width"
    :visible="visible"
    :title="title"
    @cancel="handleCancel"
    :footer="null"
  >
    <div class="modal-form">
      <a-form-model
        class="form"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <slot></slot>
        <div class="modal-footer">
          <a-button type="primary" @click="handleOk"> 确定 </a-button>
          <a-button style="margin-left: 14px" @click="handleCancel">
            取消
          </a-button>
        </div>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
export default {
  name: 's-modal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '750px'
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleOk(e) {
      this.$emit('ok', e)
    },
    handleCancel(e) {
      this.$emit('cancel', e)
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
.modal-form {
  height: 100%;
  min-height: 295px;
  box-sizing: border-box;
  /deep/.ant-form-item {
    margin-bottom: 0px;
    height: 66px;
    vertical-align: middle;
    /deep/.ant-form-item-label {
      padding-right: 5px;
    }
    /deep/.ant-form-item-label,
    .ant-form-item-control,
    label {
      font-size: 16px;
      color: #333;
    }
    /deep/.ant-form-item-control {
      padding: 0px 10px;
    }
  }
}
.modal-footer {
  width: 100%;
  text-align: center;
  padding: 15px 0px;
}
</style>